"use strict";
import * as React from 'react';
import { SCREEN_WIDTH } from "../constant";
import { autoSize, commonStyles } from "../assets/styles/common";
import Avatar from "./Avatar";
import MyText from "./MyText";
import { Actions } from "react-native-router-flux";
const { View, StyleSheet, TouchableOpacity } = require('react-native');
const { connect } = require('react-redux');
const avatarProps = {
    size: autoSize(85),
    borderColor: '#fff',
    borderWidth: 8,
};
class NoGroups extends React.Component {
    render() {
        return (<View style={[commonStyles.centerVH, styles.container]}>
                <View style={[commonStyles.flexRow, { justifyContent: 'center' }]}>
                    <Avatar {...avatarProps} source={require('../assets/image/avatar_fives.png')} style={{ zIndex: 10, backgroundColor: '#fff' }}/>
                    <Avatar {...avatarProps} style={{ zIndex: 8, marginLeft: autoSize(-60) }}/>
                    <Avatar {...avatarProps} style={{ zIndex: 6, marginLeft: autoSize(-60) }}/>
                    <Avatar {...avatarProps} style={{ zIndex: 4, marginLeft: autoSize(-60) }}/>
                    <Avatar {...avatarProps} style={{ zIndex: 0, marginLeft: autoSize(-60) }}/>
                </View>
                <View style={{ padding: 30 }}>
                    <MyText fontSize={20} fontWeight='500' style={{ textAlign: 'center' }}>
                        不要成为那个人，与大家交流并加入群组！
                    </MyText>
                </View>

                <View style={styles.btnContainer}>
                    <TouchableOpacity style={[commonStyles.centerVH, styles.btn]} onPress={Actions.allGroups}>
                        <MyText color={'#fff'} fontSize={14}>查找群组</MyText>
                    </TouchableOpacity>
                </View>

            </View>);
    }
}
const styles = StyleSheet.create({
    container: {
        backgroundColor: '#fff',
        width: SCREEN_WIDTH,
        height: autoSize(304)
    },
    btnContainer: {
        display: 'flex',
        justifyContent: 'center',
    },
    btn: {
        backgroundColor: '#DAC229',
        width: autoSize(114),
        height: autoSize(45),
    }
});
export default NoGroups;
